<template>
<div class="content-wrapper">
    <common-title title="线索分布情况（个）" imgSrc="../../../../src/assets/img/left-bottom.png"></common-title>
    <div class="chart-wrapper" ref="useChart">
    </div>
</div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import commonTitle from './commonTitleBottom.vue';
import react from '../../../assets/img/react.png'
import { fontSize } from "@/utils/fonSize";
import { onMounted, ref } from 'vue';
import  { getScan } from  '../../../api/index'
const useChart = ref<HTMLDivElement>()
onMounted(()=>{
  let a =  "u7NbzWVam1ygYSuMc/FM9QXDRlkW5wGPHIhDB8oF+kCB/BASO+LRYoOjpLBQl4BSkSPm2tAEbD0NVvtZXdVI3jbhQPXCsq+y5844iRiGJyZKWlEZKbl/hX1dmk5l9aefUQfmfB0+3WfKEkJYBjpE0Ed/vZf8MM25DbE7M/HrfbRnl2W1esuOBSeBVa8CiI4LJITUswmzN22UcobBpoy98I3g/RXzA+sio71skLyCt1xcNQ09mdNcFVledUI1i4pC"
    getScan({param: a})
    var myChart = echarts.init(useChart.value as HTMLDivElement);
    var option;

    option = {
      grid:{
        top: fontSize(20),
        bottom: fontSize(16),
        left: fontSize(60),
        right: fontSize(20),
      },
    tooltip: {

    },
    xAxis: {
      type: 'category',
      axisLabel: {
        interval:0,
        // rotate:40,
        margin: 18,
        color: '#ABD7FF',
        fontSize: fontSize(12),
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        //坐标轴轴线相关设置。数学上的x轴
        show: true,
        lineStyle: {
          color: "#033366",
          width: 2,
        },
      },
      data: ['8.1','8.2','8.3','8.4','8.5','8.6','8.7','8.8','8.9','8.10','8.11','8.12']
    },
    yAxis: {
      // name: '次',
      nameTextStyle: {
        color: "#7ec7ff",
        fontSize: fontSize(16),
        padding: 0,
      },
      type: 'value',
      axisLabel:{
        color: '#ABD7FF',
        fontSize: fontSize(12),
      },
      splitNumber: 3,
      // minInterval: 100,
      // min: 100,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: ['#04BBFF'],
          opacity: 0.3
        }
      }
    },
    series: [
        {
        type: 'pictorialBar',
        symbol: function(value,params){
          if(params.value > 0){
            return `image://${react}`
          }else{
            return 'none'
          }
        },
        label: {
            show: true,
            position: 'top',
            fontSize:12
        },
        labelLine: {
            show: false
        },
        data: [
            100,
            200,
            300,
            200,
            210,
            210,
            210,
            210,
            210,
            210,
            210,
            210,
        ]
        }
    ]
    };
    option && myChart.setOption(option);
    window.addEventListener('resize',()=>{
        myChart.resize()
    })

})
</script>
<style lang="scss" scoped>
.content-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;

    .chart-wrapper {
       flex: 1;
       width: 100%;
    }
}
</style>
